<template>
  <div>
    <Modal
      :closable="false"
      :transfer="false"
      :title="title"
      v-model="dialogVisiable"
      v-bind="$attrs"
    >
      <m-form
        ref="form"
        :formOptions="formOptions"
      ></m-form>
      <template #footer>
        <slot
          name="footer"
          :form="form"
        ></slot>
      </template>
    </Modal>
  </div>
</template>

<script setup lang="ts">
import { PropType, ref, watch } from 'vue'
import { FormOptions } from '../../form/src/types'

const props = defineProps({
  // 表单配置
  formOptions: {
    type: Array as PropType<FormOptions[]>,
    default: () => []
  },
  // 控制modal显示隐藏
  visible: {
    type: Boolean,
    default: false
  },
  // 标题
  title: {
    type: String,
    default: ''
  }
})

const form = ref()

// 单向数据流 拷贝visiable
let dialogVisiable = ref(props.visible)

// 分发事件
const emits = defineEmits(['update:visible'])

// 监听visible
watch(
  () => props.visible,
  (newVal) => {
    dialogVisiable.value = newVal
  }
)
</script>

<style scoped></style>
